<template>
  <div>
    获取store中state的值
    <p>第1种方式 2个花括号+$store.state.count : {{$store.state.count}}</p>
    <button @click="$store.commit('add')">+1</button>
    <button @click="$store.commit('reduce',{amount: 2})">-2(带参数)</button>
    <p>第2种方式:通过computed的计算属性直接赋值 {{count}}</p>
    <p>{{number}}</p>
    <p>{{name}}</p>
    <p>{{age}}</p>
    Mutation相关:
    <p>
      <button @click="fun1">+1</button>
      <button @click="add">+1</button>
      <button @click="reduce({amount:2})">-2(带参数)</button>
    </p>
    getters相关:
    <p>{{$store.getters.doneTodos}}</p>
    <p>{{$store.getters.Double_count}}</p>
    <p>{{todos}}--{{doneTodos}}</p>
    actions相关
    <p><button @click="async_add_nickname">异步+1</button></p>


  </div>
</template>
<script>
  //如果不想重复写10遍return this.$store.state，有个辅助函数。
  // vue 提供了 mapState 辅助函数，它把state 直接映射到我们的组件中。
  import {mapState} from "vuex";

  //这个 mapGetters 同样是用来简化的，不需要重复写那么多 return this.$store.getters.id1;
  import {mapGetters} from 'vuex'

  //这个的作用是不用写很多次的 this.$store.commit('add');类似这样。。。
  //可以直接  this.show_2()  这样的调用。。像函数一样的调用  映射出来而已
  import {mapMutations} from 'vuex'

  import {mapActions} from 'vuex'  //道理跟上面一样理解就行

  export default {
    data() {
      return {
        TestStore1: 'TestStore1组件的--  '
      }
    },
    computed: {
      count() {
        return this.$store.state.count;  //最基本的关联方式
      },
      //辅助函数mapState
      ...mapState({
        number: 'number',  // 等同于 `state => state.count`
        name: 'name',
        age(state) {
          return this.TestStore1 + state.age
        }
      }),
      //如果只是把当前的计算属性关联store中的state的值且名字对应一样的话，可以用下面的简易写法
      /*    ...mapState([
            'count','number','name','age'
          ])*/

      /*辅助函数mapGetters*/
      ...mapGetters({
        todos:'doneTodos'
      }),
      /*简易写法，类比上面*/
      ...mapGetters([
        'doneTodos'
        ]
      )
    },
    methods: {
      fun1() {
        this.$store.commit('add');
      },
      ...mapMutations({
        add: 'add',//类比上面的 mapState以及简易写法
        reduce: 'reduce'
      }),
      ...mapActions({
        async_add_nickname:'async_add',//类比上面的 mapState以及简易写法
      })

    }
  };
</script>
